<!--
 * @FileDescription 介绍界面
 * @Author 杨宇翔
 * @Date 20220727 19:20:36
 * @LastEditors 杨宇翔
 * @LastEditTime 20220727 19:20:36
-->
<template>
    <div class="introduction">
        <InertialNavigationHeader />
        <div class="content">
            <span>{{ IntroductionComponent.Default.Title }}</span>
            <span>{{ IntroductionComponent.Default.Description }}</span>
        </div>
        <InertialNavigationNav />
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { IntroductionComponent } from './InertialNavigationComponent';
import InertialNavigationHeader from './InertialNavigationHeader.vue';
import InertialNavigationNav from './InertialNavigationNav.vue';

onMounted(() => IntroductionComponent.Default.Awake());
onUnmounted(() => IntroductionComponent.Default.Destroy());
</script>

<style scoped>
.introduction {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.content {
    position: relative;
    top: 13.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
}

.content>span {
    color: #B1B1D4;
}

span:first-of-type {
    font-size: 3.6rem;
}

span:last-of-type {
    font-size: 1.8rem;
    max-width: 100rem;

    white-space: pre-wrap;
    text-indent: 2em;
}
</style>